<template>
  <el-container class="custom__container">
    <el-main class="custom__main">
      <hsa-adaptive-container>
        <!-- 查询 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="查询条件">
              <el-form label-width="80px">
                <hsa-row :gutter="20">
                  <hsa-col :span="8">
                    <el-form-item label="模版名称">
                      <el-input
                        v-model="templateName"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </hsa-col>
                  <hsa-col :span="8">
                    <el-form-item label="模版ID">
                      <el-input
                        v-model="templateId"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </hsa-col>
                  <template #footbar>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button type="primary" @click="queryTemplates"
                      >查询</el-button
                    >
                  </template>
                </hsa-row>
              </el-form>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>

        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="策略配置" fill>
              <template #toolbar>
                <el-button type="primary" @click="createNewTemplate"
                  >新增</el-button
                >
              </template>
              <hsa-table v-bind="tableOption"></hsa-table>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
      </hsa-adaptive-container>
    </el-main>
  </el-container>

  <delete-popup ref="deletePopupNode"></delete-popup>
  <save-as-popup ref="saveAsPopupNode"></save-as-popup>
  <share-popup ref="sharePopupNode"></share-popup>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { HsaTableColumn } from "hsa-ui";
import deletePopup from "./popup/delete-popup.vue";
import saveAsPopup from "./popup/save-as-popup.vue";
import sharePopup from "./popup/share-popup.vue";

const deletePopupNode = ref(null);
const saveAsPopupNode = ref(null);
const sharePopupNode = ref(null);

// 分享模版方法
const shareTemplate = (template: any) => {
  console.log(`分享模版 ${template.name}`);
  sharePopupNode.value.open();
};

// 另存为模版方法
const saveAsTemplate = (template: any) => {
  console.log(`将模版 ${template.name} 另存为`);
  saveAsPopupNode.value.open();
};
// 查询模版方法
const queryTemplates = () => {
  console.log(
    "执行查询操作，模版名称:",
    templateName.value,
    "模版ID:",
    templateId.value
  );
};

// 新建模版方法
const createNewTemplate = () => {
  console.log("新建模版操作");
};

// 编辑模版方法
const editTemplate = (template: any) => {
  console.log(`编辑模版 ${template.name}`);
};

// 删除模版方法
const deleteTemplate = (template: any) => {

  ElMessageBox.confirm("是否删除该模板?", "提示", {
    // confirmButtonText: '',
    // cancelButtonText: 'Cancel',
    type: "warning",
    center: true,
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除失败",
      });
    });
};
const tableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    {
      createTime: "2016-05-03",
      createUser: "王小虎",
      name: "驱动类型",
    },
  ]),
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "模板名称", prop: "name" },
    { align: "center", label: "创建人", minWidth: 200, prop: "createUser" },
    { align: "center", label: "创建时间", width: 250, prop: "createTime" },
    {
      type: "button",
      label: "操作",
      width: 240,
      fixed: "right",
      buttonGroup: [
        {
          label: "编辑",
          type: "primary",
          click: (row) => {
            console.log("编辑", row);
            editTemplate(row);
          },
        },
        {
          label: "删除",
          type: "danger",
          click: (row) => {
            console.log("删除", row);
            deleteTemplate(row);
          },
        },
        {
          label: "分享",
          type: "primary",
          click: (row) => {
            console.log("展示", row);
            shareTemplate(row);
          },
        },
        {
          label: "另存为",
          type: "primary",
          click: (row) => {
            console.log("展示", row);
            saveAsTemplate(row);
          },
        },
      ],
    },
  ]),
});
// 模拟模版数据

// 模版名称输入框绑定数据
const templateName = ref("");
// 模版ID输入框绑定数据
const templateId = ref("");

// 当前页码
const currentPage = ref(1);
// 每页显示数量
const pageSize = ref(100);

// 重置表单方法
const resetForm = () => {
  templateName.value = "";
  templateId.value = "";
  console.log("表单已重置");
};

// 处理每页数量变化
const handlePageSizeChange = (newSize: number) => {
  pageSize.value = newSize;
};

// 处理当前页码变化
const handleCurrentPageChange = (newPage: number) => {
  currentPage.value = newPage;
};
</script>

<style scoped>
.query-condition {
  margin-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 16px;
  background: #fff;
  padding: 16px;
}

.report-info {
  margin-top: 16px;
  background: #fff;
  padding: 16px;
}

.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.handle-btn {
  display: flex;
  justify-content: flex-end;
  justify-items: center;
  padding: 0 0 16px;
}
.page-type {
  margin-left: 16px;
}
.search-btn-list {
  display: flex;
  justify-content: flex-end;
}
.custom__main {
  padding: 0;
  padding-left: 10px;
}
</style>
